<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> 
<%@ page contentType="text/html;charset=utf-8" language="java"%>
<%
	String baseP = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/";
%>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="<c:url value='/static/theme/3/main.css'/>">
<script type="text/javascript" src="<c:url value='/static/common/js/jquery-1.11.0.min.js'/>"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>实时路况</title>
<style type="text/css">
	.sslk_search
	{
	  width: 98%;
  height: 30px;
  margin: 10px auto;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
	}
	.search{float: left;
  width: 75%;
  height: 30px;
  text-indent: 10px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;}
  .btn-buttom
  {
    float: right;
  width: 25%;
  height: 30px;
  background-color: #1FA0BD;
  color: #fff;
  border: none;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  }
</style>
</head>
<body>
	<div class="sslk_tit">实时路况</div>
	<div class="sslk_search"><input type="text" id="search" name="search" class="search"/> <input type="button" value="搜索" onclick="search()" class="btn-buttom"/></div>
	<div class="sslk_time"> <a href="javascript:reload();"><img alt="重新加载" src="<c:url value='/static/theme/3/images/refresh.png'/>"/></a>
	  <div class="time_text"></div>
	</div>
	<div id="content"></div>
	<div class="sslk_more" style="cursor: pointer;" onclick="more(this)">加载更多</div>
</body>
<script>
var currentPage = 0;
$(function(){
	getDate();
	loadMore(1);
	currentPage = 1;
});

function search(){
	var keyword = $("#search").val();
	if(!keyword)
		return;
	
	$("#content").empty();
	
	$.ajax({
		url : "http://221.224.13.5:8190/econsole/api/query/monitors/search?address=" + keyword,
		type : "get",
		timeout : 6000,
		async : false,
		beforeSend:function(){
			$(".sslk_more").html("数据加载中");
			console.log("数据加载中");
		},
		success : function(data) {
			var resultData = data['msg'];
			var _data = eval("("+resultData+")");
			if (_data&&_data.length>0) {
 				$.each(_data,function(i,v){
					//获取监控点照片
					$.get("http://221.224.13.5:8190/econsole/api/query/road/"+v.equipmentId+"",function(picData){
						var img_url="<c:url value='/static/theme/3/images/roaddef.jpg'/>";
						if(null!=picData.data){
							img_url = picData.data;
						}
	 					var css2 = "";
						if((i+1)%2 == 0){
							css2 = "marl";
						}
						$("#content").append("<ul class=\"sslk_ul "+css2+"\"><li class=\"li_img\"><img onerror=\"javascript:this.src='<c:url value='/static/theme/3/images/roaddef.jpg'/>';\" src=\""+img_url+"\"/></li><li class=\"li_text\">"+v.equipmentName+"</li></ul>");
						css2 = "";
					});
				});
 				$(".sslk_more").hide();
			}else{
				$("#content").append("未搜索到相关数据");
			}
		}
	});
}

function reload(){
	$("#search").val("");
	$("#content").empty();
	$("#content ul").remove();
	getDate();
	loadMore(1);
}

function getDate(){
	var d = new Date();
	_timeStr = d.getFullYear() + "-" + (d.getMonth() + 1)+"-"+d.getDate()+" "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
	$(".time_text").html(_timeStr);
}

function more(obj){
	$(obj).html("加载中");
	currentPage ++;
	loadMore(currentPage);
}

function loadMore(page){
	if(!page)
		page = 1;
	
	$.ajax({
		url : "http://221.224.13.5:8190/econsole/api/query/road/page/"+page,
		type : "get",
		timeout : 6000,
		async : false,
		beforeSend:function(){
			$(".sslk_more").html("数据加载中");
			console.log("数据加载中");
		},
		success : function(data) {
			var resultData = data['data'];
			if (resultData&&resultData.length>0) {
				$.each(resultData,function(i,v){
					var css2 = "";
					if((i+1)%2 == 0){
						css2 = "marl";
					}
					$("#content").append("<ul class=\"sslk_ul "+css2+"\"><li class=\"li_img\"><img onerror=\"javascript:this.src='<c:url value='/static/theme/3/images/roaddef.jpg'/>';\" src=\""+v.path+"\"/></li><li class=\"li_text\">"+v.equipmentName+"</li></ul>");
					css2 = "";
				});
				$(".sslk_more").html("加载更多");
			}else{
				$(".sslk_more").html("无更多数据");
			}
		}
	});
}
</script>
</html>
